<template>
	<view>
		<!-- 搜索框 -->
		<u-search style="margin: 10px 2vw;" shape="round" placeholder="请输入要添加好友的账号:" :showAction="false"
			:clearabled="false" @search="goToAddFriend"></u-search>
		<!-- 新朋友 -->
		<view class="topFunction" @click="goToNewFriend">
			<text>新朋友</text>
			<u-icon name="arrow-right"></u-icon>
		</view>
		<!-- 我的群聊 -->
		<view class="topFunction" @click="goToTeam">
			<text>我的群聊</text>
			<u-icon name="arrow-right"></u-icon>
		</view>
		<!-- 间隔线 -->
		<u-line style="margin-top: 5px;"></u-line>
		<!-- 好友分组 -->
		<view style="display: flex;">
			<view style="text-align: center; flex:9; font-size: 30rpx;">
				好友分组
			</view>
			<u-icon name="list-dot" style="text-align: center; flex:1;" size="30" @click="changeGroup"></u-icon>
		</view>

		<view v-if="friendList.length==0" style="text-align: center; margin-top: 10px;">
			好友列表为空
		</view>
		<!-- 分组列表 -->
		<view v-for="(list,index) in friendList" :key="index">
			<view class="bottomFunction" @click="clickGroup(index)">
				<u-icon name="arrow-down-fill" v-if="list.open"></u-icon>
				<u-icon name="play-right-fill" v-else></u-icon>
				<text>{{list.groupName}}</text>
			</view>
			<!-- 分组内好友列表 -->
			<view class="friendList" v-if="list.open" v-for="item in list.friendList" :key="item.friendId"
				hover-class="listHover">
				<u-avatar :src="item.image" size="16vw" @click="goToFriendDetail(item.friendId,item.notes)"></u-avatar>
				<view class="userInfoBox" @click="goToChat(item.friendId,item.notes)">
					<view class="userName">
						{{item.notes}}({{item.account}})
					</view>
					<view class="personalSignature">
						{{item.personalSignature}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				friendList: []
			}
		},
		methods: {
			goToTeam() {
				uni.navigateTo({
					url: "/pages/team/team/team"
				})
			},
			goToFriendDetail(userId, name) {
				uni.navigateTo({
					url: "/pages/person/friendDetail/friendDetail?userId=" + userId + "&name=" +
						name
				})
			},
			// 更改分组的打开、关闭状态
			clickGroup(index) {
				this.friendList[index].open = !this.friendList[index].open;
				// 因为数据层次太多，导致没有自动更新，需手动强制刷新渲染。
				this.$forceUpdate()
			},
			changeGroup() {
				uni.navigateTo({
					url: "/pages/person/changeGroup/changeGroup"
				})
			},
			goToNewFriend() {
				uni.navigateTo({
					url: "/pages/person/newFriend/newFriend"
				})
			},
			goToAddFriend(e) {
				if (e == "") {
					uni.showToast({
						title: "账号为空",
						icon: 'error'
					})
				} else {
					uni.navigateTo({
						url: "/pages/person/addFriend/addFriend?account=" + e
					})
				}
			},
			getFriendList() {
				uni.request({
					url: getApp().url + 'friendList/getFriendList',
					data: {
						userId: uni.getStorageSync("userId")
					},
					header: {
						token: uni.getStorageSync("token")
					},
					method: "GET",
					success: (response) => {
						if (response.data.code == -1) {
							return uni.showToast({
								icon: "error",
								title: response.data.msg
							});
						};
						this.friendList = response.data.data;
						uni.setStorageSync("friend", this.friendList);
						// forEach()遍历frinendList,追加列表打开为false
						this.friendList.forEach(item => {
							item.open = false
						})
					},
					fail: (error) => {
						console.log(error);
					}
				})
			},
			// 进入对应的聊天页面
			goToChat(userId, userName) {
				uni.navigateTo({
					url: "/pages/contact/chat/chat?userId=" + userId + "&userName=" + userName
				})
			},

		},
		onShow() {
			this.getFriendList()
		}
	}
</script>

<style lang="scss">
	.topFunction {
		display: flex;
		justify-content: space-between;
		margin: 0 2vw;
		padding: 2vw 0;
	}

	.bottomFunction {
		display: flex;
		margin: 0 2vw;
		padding: 2vw 0;
	}

	.friendList {
		display: flex;
		padding: 5px 2vw;

		.userInfoBox {
			width: 80vw;
			display: flex;
			flex-direction: column;
			justify-content: space-around;

			.userName {
				margin-left: 2vw;
			}

			.personalSignature {
				margin-left: 2vw;
				font-size: small;
				color: #A09D9D;
			}
		}
	}

	.listHover {
		background-color: #C3C3C3;
	}
</style>